<!DOCTYPE html>
<html>
<head>
	<title>drap</title>
	<meta charset="utf-8" />

	<style type="text/css">
		#box{
			width: 100px;
			height: 100px;
			background: #00f;
			position: absolute;
			top: 40%;
			left: 50%;
			/*margin-left: -50px;*/
		}
	</style>
</head>
<body>

<div id="box-wrap">
	<div id="box"></div>
</div>

<script type="text/javascript">
	//mousedown mousemove mouseup
	var start = false
	// var box = document.getElementById('box')
	box.onmousedown = function(event) {
		start = true
	}
	box.onmousemove = function(event) {
		if (start) {
			moveBox()
		}
	}
	box.onmouseup = function (event) {
		start = false
	}
	function moveBox(){
		box.style.top = event.clientY - 50 + 'px'
		box.style.left = event.clientX - 50 + 'px'
	}

</script>

</body>
</html>